<template>
<view>
<view class="coupPage">
  <view v-if="couponList.length>0">
    <view v-for="(coupon, index) in couponList" :key="index" class="coupon">
      <coupon :coupon="coupon" state="noUse" @myCouponGet="myCouponGet"></coupon>
    </view>
  </view>
  <view v-else>
    <noCoupon></noCoupon>
  </view>
</view>
<auth :authType="authType" @authClick="authClick"></auth>
</view>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import { getCouponIndex, getOneCoupon } from "@/api/modules/coupon";
import coupon from "@/components/couponCom/coupon/coupon.vue"
import noCoupon from "@/components/couponCom/noCoupon/noCoupon.vue"
import auth from "@/components/auth/auth.vue"
@Component({components:{
    coupon,
    noCoupon,
    auth
}})
export default class CouponCenter extends Vue {
    couponList:Array<any>=[]
    authType:boolean = false
      onShow() {
    this.getList();
  }
  getList() {
    getCouponIndex({}).then(res => {
      res.forEach((item, index) => {
        item.hasUse = false;
        item.index = index;
        item.checkType = true;
      });
      this.setData({
        couponList: res,
      });
    });
  }

  /**
   * 用户领券中心领取
   */
  myCouponGet(options) {
    const userInfo = this.$store.state.userStore.userInfo;
    if (!userInfo.whetherAuthorization) {
      this.setData({
        authType: true,
      });
      return;
    }
    getOneCoupon(options.id, {})
      .then(() => {
        uni.showToast({ title: "领取成功", icon: "none", duration: 1500 });
        this.getList();
      })
      .catch(err => {
        uni.showToast({ title: err, icon: "none", duration: 1500 });
        this.getList();
      });
  }
  authClick(){
    this.authType = false
  }
}
</script>
<style lang="scss" scoped>
.coupPage {
    background-color: #fff;
    height: 600px;
}

.coupon {
    display: flex;
}

.noCoupon {
    display: flex;
    align-items: center;
    justify-content: center;

    &__content {
        margin-top: 100px;

        &--title {
            width: 80px;
            flex-wrap: wrap;
            margin-top: 25px;
            margin-left: 40px;
        }
    }
}

.goButn {
    width: 70px;
    height: 25px;
    border-radius: 50px;
    background-image: linear-gradient(#FE708F, #FE5369);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 15px;
}
</style>